<template>
  <div class="contain">
    <img src="../../assets/images/index.png" class="imgsize1" alt="" />
    <PhoneCarousel :phones="phones" class="test-" v-if="false" />
    <div class="content-padding">
      <div class="from">
        <div class="input-box-buzhou">
          <img
            src="../../assets/images/phone.gif"
            v-if="gif1"
            class="gif-sty"
            alt=""
          />
          <input
            type="text"
            class="input-sty"
            v-model="phone"
            @focus="handleFocus"
            @blur="handleBlur"
            data-action="phone"
            placeholder="请输入移动手机号码"
          />
          <img
            src="../../assets/images/shouzhi.gif"
            v-if="gif2"
            class="gif-sty2"
            alt=""
          />
        </div>
        <div class="ct">
          <img
            src="../../assets/images/3333.gif"
            v-if="gif3"
            class="gif-sty3"
            alt=""
          />
          <input
            type="text"
            v-model="yzm"
            @focus="handleFocus2"
            @blur="handleBlur2"
            class="input-sty ts posi"
            placeholder="请输入短信验证码"
          />
          <div class="left" @click="getYzm">
            <div class="shabi12"></div>
            {{ yzmText }}
          </div>
        </div>
        <div class="btn" @click="buy">
          <img
            src="../../assets/images/btn.png"
            class="imgsize2 shrink-grow"
            alt=""
          />
          <img
            src="../../assets/images/123456.gif"
            v-if="gif4"
            class="gif-sty4"
            alt=""
          />
        </div>
      </div>
      <div class="content" v-if="false">
        <div class="model1 flex-colum">
          <div class="img-title">
            <img src="../../assets/images/ywsm.png" class="imgsize3" alt="" />
          </div>
          <div class="pre">
            <p>一、业务名称：咪咕快游钻石会员</p>
            <p>二、业务资费：20元/月</p>
            <p>三、业务说明：</p>
            <p>
              产品说明：咪咕快游钻石会员，资费20元/月，通过中国移动话费中扣取，开通/退订立即生效，支付方式为话费连续包月支付，未退订则按自然月续订并续费。如当月退订，下月才可重新订购。
            </p>
            <p>
              开通咪咕快游钻石会员即可获得云游戏时长，秒玩海量热门手游、3A主机大作！更有游戏礼包、专属流量、优先排队等特权助你所向披靡。
            </p>
            <p>四、活动内容:</p>
            <p>
              （1）活动期间，首次在本页面成功开通以下业务其中之一即可获得爆款会员月卡(任选1):芒果TV(月卡)、QQ音乐(月卡)、爱奇艺会员(月卡)、优酷VIP会员(月卡)、饿了么会员(月卡)、WPS会员(月卡)、酷狗豪华VIP(月卡)、网易云VIP(月卡)、哔哩哔哩会员(月卡)等，以实际页面为准。
            </p>
            <p>
              （2）点击进入<i class="font-sty" @click="goURl()">福利兑换中心</i
              >选择您需要的会员权益进行兑换，兑换成功后可前往权益所在平台激活使用。温馨提示:使用相关权益时，请遵守相应平台的用户服务协议和权益使用协议，如违反相关协议规定，运营商和联合权益提供方均有权单独进行处理包括但不限于中止或终止提供其所属平台的服务及要求侵权赔偿等。
            </p>
            <p>（3）权益有效时间核算：</p>
            <p>自首次开通业务起7日之内可领取爆款会员权益。</p>
            <p>
              （4）如对产品服务有任何疑问，可致电客服热线
              <i class="font-sty" @click="goTel()">400-991-5882</i>
              进行咨询。
            </p>
          </div>
        </div>
      </div>
      <div class="posi-re" style="margin-top: -1px">
        <div class="posi-fixed" @click="dialNumber('4001033963')" v-if="false">
          客服电话：4009915882
        </div>
        <img
          src="../../assets/images/1234.png"
          @click="goURl()"
          class="mid-img"
          alt=""
        />
        <!-- <img src="../../assets/images/tu3.png" class="mid-img" alt="" />
        <img src="../../assets/images/zgyd.png" class="mid-img" alt="" /> -->
      </div>

      <DialogSb
        :visible="dialogVisible"
        @update:visible="closeDialog"
        v-if="false"
        title="My Dialog"
      >
        <div class="img">
          <img src="../../assets/images/error.png" class="imgsize1-1" alt="" />
        </div>
      </DialogSb>
      <DialogSb
        :visible="dialogVisibleSuess"
        v-if="false"
        @update:visible="closeDialog"
        title="My Dialog"
      >
        <div class="img" style="position: relative">
          <img
            src="../../assets/images/success.png"
            class="imgsize1-1"
            alt=""
          />
          <van-button
            round
            type="info"
            size="small"
            color="#fa9a3d"
            class="posi-ap"
            @click="goURl()"
            >领取权益</van-button
          >
        </div>
      </DialogSb>
      <DialogSb
        :visible="dialogVisibleConfig"
        @update:visible="closeDialog"
        title="My Dialog"
      >
        <div class="img posi-model">
          <img src="../../assets/images/config.png" class="imgsize1-3" alt="" />
          <div class="btn-box">
            <div @click="closeDialog" class="imgsize1-4" alt="">
              <img
                src="../../assets/images/config-.png"
                class="config-style-1"
                alt=""
              />
            </div>
            <div @click="configBuy" class="imgsize1-4" alt="">
              <img
                src="../../assets/images/2.png"
                class="config-style-2 shrink-grow2"
                alt=""
              />
              <img
                src="../../assets/images/444.gif"
                class="config-style-3"
                alt=""
              />
            </div>
          </div>
        </div>
      </DialogSb>
      <div class="loading-box" v-if="isLoading">
        <van-loading type="spinner" size="28px" vertical>加载中...</van-loading>
      </div>
    </div>
    <!-- <img
      src="../../assets/images/lxkf.png"
      @click="dialNumber('4001033963')"
      class="style-fixed"
      alt=""
    /> -->
  </div>
</template>
<script>
/* eslint-disable no-undef */
import { sendSmsYzm, openBiz } from "@/api/user.js";
import DialogSb from "@/components/DialogView.vue";
import PhoneCarousel from "../shabidongxi.vue";
import { Dialog } from "vant";
export default {
  name: "XhdlView",
  data() {
    return {
      isLoading: false,
      phone: "",
      phones: [
        "138****5678抢到了",
        "139****6789抢到了",
        "137****7890抢到了",
        "136****8901抢到了",
        "135****9012抢到了",
        "134****0123抢到了",
        "133****1234抢到了",
        "132****2345抢到了",
        "131****3456抢到了",
        "130****4567抢到了",
        "139****5678抢到了",
        "138****6789抢到了",
        "137****7890抢到了",
        "136****8901抢到了",
        "135****9012抢到了",
      ],
      yzm: "",
      countdown: 60,
      //订单号
      orderSn: "",
      yzmText: "获取验证码",
      errormessage: "手机号码错误",
      dialogVisible: false,
      sendState: false,
      dialogVisibleSuess: false,
      dialogVisibleConfig: false,
      gif1: true,
      gif2: false,
      gif3: false,
      gif4: false,
      //产品信息init
      goodsInfo: {
        goodsCode: "99551009",
        goodsName: "20元书香包（喜马拉雅少儿+青年）-标准月费版",
        goodsPrice: "20元",
      },
      requestId: "",
    };
  },
  components: {
    DialogSb,
    PhoneCarousel,
  },
  created() {
    console.log("******插码进入页面*********");
    // _pagecode.push([
    //   "书香包",
    //   "首页",
    //   {
    //     stepNo: "1",
    //     ...this.goodsInfo,
    //     scene: "进入书香包首页",
    //   },
    // ]);
  },
  watch: {
    phone(newValue) {
      if (
        newValue.trim() !== "" &&
        this.validatePhoneNumber(newValue) === null
      ) {
        this.gif1 = false;
        this.gif2 = true;
      } else {
        this.gif1 = true;
        this.gif2 = false;
        this.gif3 = false;
        this.gif4 = false;
      }
    },
    yzm(newValue) {
      if (newValue.trim() !== "" && newValue.length == 6) {
        this.gif1 = false;
        this.gif2 = false;
        this.gif3 = false;
        this.gif4 = true;
      } else {
        this.gif1 = false;
        this.gif2 = false;
        this.gif3 = true;
        this.gif4 = false;
      }
    },
    yzmText(newValue) {
      if (
        newValue.trim() !== "获取验证码" &&
        this.gif1 == false &&
        this.sendState == true
      ) {
        this.gif1 = false;
        this.gif2 = false;
        this.gif3 = true;
      }
    },
  },
  computed: {},
  mounted() {
    // this.getRequestid();
  },
  beforeDestroy() {},
  methods: {
    goTel() {
      window.location.href = "tel://" + "4009915882";
    },
    dialNumber(number) {
      // 使用 tel: 协议拨号
      window.location.href = `tel:${number}`;
    },
    handleFocus() {
      this.gif1 = false; // 当输入框被点击时，更新状态
    },
    handleBlur() {
      if (this.validatePhoneNumber(this.phone) !== null) {
        this.gif1 = true; // 当输入框被点击时，更新状态
      }
    },
    handleFocus2() {
      this.gif3 = false; // 当输入框被点击时，更新状态
    },
    handleBlur2() {
      if (this.yzm !== "" && this.yzm.length !== 6) {
        this.gif3 = true; // 当输入框被点击时，更新状态
      }
    },
    buy() {
      var phone = this.phone;
      var errorMessage = this.validatePhoneNumber(phone);
      //如果有错误消息没有通过表单验证不发
      if (errorMessage) {
        this.$toast({
          message: errorMessage,
          duration: 2000,
        });
        return;
      }
      if (!this.yzm) {
        this.$toast({
          message: "请输入验证码",
          duration: 2000,
        });
        return false;
      }
      this.dialogVisibleConfig = true;
    },
    // getYzm() {
    //   //如果处于倒计时就不发
    //   if (this.countdown !== 60) {
    //     return;
    //   }
    //   var phone = this.phone;
    //   var errorMessage = this.validatePhoneNumber(phone);
    //   //如果有错误消息没有通过表单验证不发
    //   if (errorMessage) {
    //     this.$toast({
    //       message: errorMessage,
    //       duration: 2000,
    //     });
    //     return;
    //   }
    //   // var time = this.getCurrentDateTime();
    //   var reqData = {
    //     channelId: "CM",
    //     mobileNo: phone,
    //   };
    //   var reqData2 = {
    //     mobileNo: phone,
    //   };
    //   this.isLoading = true;
    //   getEncryCode(reqData2).then((res) => {
    //     console.log("******插码init用户信息*********");
    //     _pagecode.init({
    //       user: res.data.data, // 这里假设 serialNumber 是服务器渲染的变量
    //     });
    //     console.log("******插码发送验证码*********");
    //     _pagecode.push([
    //       "书香包",
    //       "获取验证码",
    //       {
    //         stepNo: "30",
    //         goodsCode: this.goodsInfo.goodsCode,
    //         goodsName: this.goodsInfo.goodsName,
    //       },
    //     ]);
    //     sendSmsYzm(reqData)
    //       .then((res) => {
    //         console.log(res);
    //         this.isLoading = false;
    //         this.sendState == true;
    //         if (res.data.state === -1) {
    //           console.log("******插码获取验证码失败*********");
    //           _pagecode.push([
    //             "书香包",
    //             "获取验证码失败",
    //             {
    //               stepNo: "-31",
    //               goodsCode: this.goodsInfo.goodsCode,
    //               goodsName: this.goodsInfo.goodsName,
    //             },
    //           ]);
    //           Dialog.alert({
    //             title: "温馨提示",
    //             message: res.data.message,
    //           }).then(() => {});
    //         } else {
    //           console.log("******插码获取验证码成功*********");
    //           _pagecode.push([
    //             "书香包",
    //             "获取验证码成功",
    //             {
    //               stepNo: "31",
    //               goodsCode: this.goodsInfo.goodsCode,
    //               goodsName: this.goodsInfo.goodsName,
    //             },
    //           ]);
    //           this.djs();
    //           this.$toast({
    //             message: res.data.message,
    //             duration: 2000,
    //           });
    //           this.orderSn = res.data.data;
    //         }
    //       })
    //       .catch((error) => {
    //         console.log("******插码获取验证码失败*********");
    //         _pagecode.push([
    //           "书香包",
    //           "获取验证码失败",
    //           {
    //             stepNo: "-31",
    //             goodsCode: this.goodsInfo.goodsCode,
    //             goodsName: this.goodsInfo.goodsName,
    //           },
    //         ]);
    //         // 处理超时或其他错误情况
    //         this.isLoading = false;
    //         console.error("请求发送短信验证码出错：", error);
    //         this.$toast({
    //           message: "请求发送短信验证码出错，请稍后重试",
    //           duration: 2000,
    //         });
    //       });
    //   });
    // },
    getYzm() {
      //如果处于倒计时就不发
      if (this.countdown !== 60) {
        return;
      }
      var phone = this.phone;
      var errorMessage = this.validatePhoneNumber(phone);
      //如果有错误消息没有通过表单验证不发
      if (errorMessage) {
        this.$toast({
          message: errorMessage,
          duration: 2000,
        });
        return;
      }
      const timestamp = Date.now(); // 返回当前时间的时间戳，单位为毫秒
      var reqData2 = {
        mobileNo: phone,
        serialNumber: timestamp + phone,
      };
      this.isLoading = true;
      sendSmsYzm(reqData2)
        .then((res) => {
          this.isLoading = false;
          this.sendState == true;
          if (res.data.state === 1) {
            this.djs();
            this.requestId = res.data.payOrderSn;
            this.$toast({
              message: res.data.message,
              duration: 2000,
            });
          } else {
            Dialog.alert({
              title: "温馨提示",
              message: res.data.message,
            }).then(() => {});
          }
        })
        .catch((error) => {
          // 处理超时或其他错误情况
          this.isLoading = false;
          console.error("请求发送短信验证码出错：", error);
          this.$toast({
            message: "请求发送短信验证码出错，请稍后重试",
            duration: 2000,
          });
        });
    },

    configBuy() {
      var reqData = {
        // channelId: "CM",
        mobileNo: this.phone,
        smsCode: this.yzm,
        payOrderSn: this.requestId,
      };
      this.isLoading = true;
      openBiz(reqData)
        .then((res) => {
          this.isLoading = false;
          if (res.data.state === 1) {
            //如果等于0就清除数据
            this.initData();
            this.dialogVisibleConfig = false;
            this.dialogVisibleSuess = true;
          }
          if (res.data.state === -1) {
            this.dialogVisibleConfig = false;
            this.dialogVisible = true;
          }
          // if (res.data.state === 2) {
          //   this.dialogVisibleConfig = false;
          // }
          Dialog.alert({
            title: "温馨提示",
            message: res.data.message,
          }).then(() => {});
        })
        .catch(() => {
          this.dialogVisibleConfig = false;
          this.isLoading = false;
          this.dialogVisible = true;
        });
    },
    closeDialog() {
      console.log("******办理失败*********");
      // _pagecode.push([
      //   "书香包",
      //   "办理失败",
      //   {
      //     stepNo: "-99",
      //     goodsCode: this.goodsInfo.goodsCode,
      //     goodsName: this.goodsInfo.goodsName,
      //   },
      // ]);
      this.dialogVisible = false; // 关闭对话框
      this.dialogVisibleSuess = false; // 关闭对话框
      this.dialogVisibleConfig = false; // 关闭对话框
    },
    initData() {
      (this.phone = ""), (this.yzm = "");
    },
    goURl() {
      window.location.href = "http://124.71.215.94:51020/#/smile";
    },
    djs() {
      // 如果倒计时还未结束，则不执行任何操作
      if (this.countdown !== 60) {
        return;
      }
      // 设置倒计时文本为六十秒
      this.yzmText = "60秒后重新获取";
      // 启动定时器，每秒更新倒计时文本，直到倒计时结束
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
          this.yzmText = `${this.countdown}秒后重新获取`;
        } else {
          clearInterval(timer);
          this.yzmText = "获取验证码";
          this.countdown = 60; // 重置倒计时
        }
      }, 1000);
    },
    validatePhoneNumber(phone) {
      // 判断手机号是否为空
      if (!phone) {
        return "请输入手机号码";
      }
      // 判断手机号是否为数字且长度是否为11位
      if (!/^\d{11}$/.test(phone)) {
        return "手机号码必须为11位数字";
      }

      // 手机号验证通过
      return null;
    },

    showDialog() {
      this.dialogVisible = true;
    },

    getCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      return `${year}${month}${day}${hours}${minutes}${seconds}`;
    },
  },
};
</script>

<style lang="less" scoped>
.font-sty {
  text-decoration: underline;
}
.from {
  position: relative;
  z-index: 0;
  background-color: #e33c50;
  padding: 1.1rem 0 0.2rem;
  display: flex;
  margin-top: -1px;
  flex-direction: column;
  align-items: center;
}
.test- {
  position: absolute;
  z-index: 2;
  top: 408px;
}
.contain {
  width: 100%;
  position: relative;
}
.img-title {
  margin-top: 18px;
}
.imgsize4 {
  width: 257px;
  height: 31px;
  margin-bottom: 15px;
}
.imgsize1 {
  width: 100%;
  height: 498px;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 19px;
}
.imgsize3 {
  width: 175px;
  height: 29px;
  margin-bottom: 15px;
}
.imgsize2 {
  margin-top: 15px;
  width: 80%;
}
.shrink-grow {
  animation: shrinkGrow 0.7s ease-in-out infinite; /* 2秒内完成动画，并无限循环 */
}
.shrink-grow2 {
  animation: shrinkGrow2 0.7s ease-in-out infinite; /* 2秒内完成动画，并无限循环 */
}

@keyframes shrinkGrow2 {
  0% {
    transform: scale(1); /* 初始状态，原始大小 */
  }
  50% {
    transform: scale(0.9); /* 缩小到 90% */
  }
  100% {
    transform: scale(1); /* 还原到原始大小 */
  }
}
@keyframes shrinkGrow {
  0% {
    transform: scale(1); /* 初始状态，原始大小 */
  }
  50% {
    transform: scale(0.97); /* 缩小到 90% */
  }
  100% {
    transform: scale(1); /* 还原到原始大小 */
  }
}
.input-sty {
  border-radius: 25px;
  width: 80%;
  height: 54px;
  border: none;
  background-color: #fff;
  /* 重置默认的背景颜色 */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  /* 取消默认的内边距 */
  padding: 0;
  /* 取消默认的外边距 */
  margin: 0;
  /* 去除默认的外边框 */
  outline: none;
  text-indent: 0.5rem;
  font-size: 17px !important;
  border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6;
}
.ts {
  width: 100% !important;
}
.input-box-buzhou {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.gif-sty {
  width: 214px;
  height: 48px;
  position: absolute;
  top: -35px;
  z-index: 999999999;
  left: 50px;
}
.gif-sty3 {
  width: 214px;
  height: 48px;
  position: absolute;
  top: -30px;
  z-index: 999999999;
  left: 15px;
}
.gif-sty2 {
  width: 78px;
  height: 57px;
  position: absolute;
  bottom: -36px;
  z-index: 999999999;
  right: 50px;
}
.gif-sty4 {
  width: 156px;
  height: 57px;
  position: absolute;
  bottom: 30px;
  z-index: 999999999;
  left: 30%;
  transform: translate(
    -50%,
    -50%
  ); /* 平移自身的一半宽度和高度，以实现完全居中 */
}
.input-sty::placeholder {
  font-size: 17px !important;

  color: #999; /* 设置为灰色 */
}
.posi {
  position: absolute;
  right: 0;
  top: 0;
}

.ct {
  width: 80%;
  margin-top: 22px;
  position: relative;
  height: 44px !important;
  .left {
    position: absolute;
    right: 0;
    top: 1px;
    width: 144px;
    height: 54px;
    color: #f08618;
    border-radius: 0px 22px 22px 0px;
    font-weight: 400;
    font-size: 17px;
    text-align: center;
    line-height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.shabi12 {
  width: 2px;
  height: 16px;
  background-color: #f08618;
  margin-right: 10px;
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .pre {
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
    background: rgb(227, 60, 80);
    line-height: 22px;
  }
}
.imgsize1-1 {
  width: 292px;
  height: 196px;
}
.imgsize1-3 {
  width: 85%;
}
.imgsize1-4 {
  width: 257px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: transparent;
}
.config-style-3 {
  position: absolute;
  width: 48px;
  height: 66px;
  bottom: -66px;
}
.posi-model {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .btn-box {
    width: 65%;
    position: absolute;
    bottom: 25px;
    display: flex;
    height: 60px;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
  }
}
.loading-box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}
.imgsize7 {
  width: 100%;
}
.model1 {
  align-items: center;
  position: relative;
  width: 100%;
  margin-top: -1px;
  padding: 0 16px;
  background: rgb(227, 60, 80);
  box-sizing: border-box;
}
.sty {
  position: absolute;
  width: 54px;
  height: 48px;
  right: 0;
  top: -20px;
}
.model2 {
  align-items: center;
  position: relative;
  width: 360px;
  height: 983px;
  margin-top: 26px;
  padding: 0 16px;
  background-image: url(../../assets/images/model.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.posi-ap {
  position: absolute;
  bottom: 0;
  width: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mid-img {
  width: 100%;
}
.config-style-1 {
  width: 100px;
  height: 35px;
}
.config-style-2 {
  width: 100px;
  height: 35px;
}
.style-fixed {
  position: fixed;
  top: 60px;
  right: 15px;
  width: 60px;
  height: 60px;
}
.posi-fixed {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: rgb(246, 99, 12);
  top: -35px;
}
.posi-re {
  position: relative;
}
</style>
